<template>
    <div>
        <el-card>
            <el-form ref="form" :model="form" label-width="80px">
                <el-select v-model="form.houseId" placeholder="请选择房屋id">
                    <el-option
                            v-for="item in releaseIdList"
                            :key="item"
                            :value="item">
                    </el-option>
                </el-select>
            </el-form>
            <el-divider></el-divider>
            <el-upload
                    style="margin-top: 20px;"
                    :multiple="true"
                    action="#"
                    list-type="picture-card"
                    :http-request="uploadHousePic"
                    :auto-upload="false"
                    :file-list="fileList"
                    ref="upload">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                    <img
                            class="el-upload-list__item-thumbnail"
                            :src="file.url" alt=""
                    >
                    <span class="el-upload-list__item-actions">
        <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
                </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </el-card>
        <div style="text-align: center;">
            <el-button type="success" style="margin-top: 10px;" @click="submitHousePic">上传文件</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        inject: ['reload'],
        name: "UploadHousePic",
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                fileList: [],
                releaseIdList: [],
                formData: '',
                form: {
                    houseId: ''
                }
            }
        },
        created() {
            const _this = this
            const userId = localStorage.getItem('userId')
            _this.$http.get('/house/selectHasReleaseHouseByReleaseId/' + userId).then(function (resp) {
                console.log(resp)
                if(resp.data.code === 201)
                {
                    _this.releaseIdList = resp.data.data
                }
            })
        },
        methods: {
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleDownload(file) {
                console.log(file);
            },
            uploadHousePic: function (item) {
                this.formData.append('files', item.file)
            },
            submitHousePic: function () {
                const _this = this
                this.formData = new FormData()
                this.$refs.upload.submit()
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                this.$http.post('/house/upload?houseId=' + _this.form.houseId, this.formData, config).then( function (resp) {
                    console.log(resp)
                    if (resp.data.code === 206)
                    {
                        _this.$message.success("成功插入" + resp.data.data + "张图片")
                        _this.reload()
                    }
                })
            }
        },
    }
</script>

<style scoped>

</style>
